<template>
    <t-breadcrumb :max-item-width="'150'" style="margin-bottom: 10px;">
        <t-breadcrumb-item> {{ $t('layout.aside.photographArea') }} </t-breadcrumb-item>
        <t-breadcrumb-item> {{ $t('layout.aside.photograph') }}</t-breadcrumb-item>
    </t-breadcrumb>
    <t-space direction="horizontal" style="margin:0 10px 5px 0;">
        <span>{{ $t('photograph.name') }}:</span>
        <t-input style="width: 140px;" size='small' v-model="searchValue.extendedValue4" clearable
            :placeholder="$t('common.input.name')"></t-input>
        <span>{{ $t('report.userName') }}:</span>
        <t-input style="width: 140px;" size='small' v-model="searchValue.extendedValue1" clearable
            :placeholder="$t('common.input.name')"></t-input>
        <span>{{ $t('report.reporter') }}:</span>
        <t-input style="width: 140px;" size='small' v-model="searchValue.extendedValue2" clearable
            :placeholder="$t('common.input.name')"></t-input>

    </t-space>
    <t-space direction="horizontal">
        {{ $t('report.type.type') }}:
        <t-select style="width: 140px;" size='small' v-model="searchValue.extendedValue3" placeholder="请选择">
            <t-option v-for="type in types" :key="type.id" :label="type.name" :value="type.id" />
        </t-select>
        {{ $t('report.status') }}:
        <t-select style="width: 140px;" size='small' v-model="searchValue.searchValue" placeholder="请选择">
            <t-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id" />
        </t-select>
        <!-- 查询按钮 -->
        <t-button @click="searchChange" size="small">{{ $t('common.button.search') }}</t-button>
    </t-space>

    <t-table style="margin-top: 10px;" height="calc(100vh - 333px)" :pagination="pagination" size="small"
        row-key="index" :data="datas" :columns="columns">
        <template #description="{ row }">
            <t-link theme='primary' @click="details(row.photographId)">
                {{ $t('common.button.details') }}
            </t-link>
        </template>
        <template #creationTime="{ row }">
            {{ row.creationTime.replace('T', ' ').substr(0, 19) }}
        </template>
        <template #updateTime="{ row }">
            <span v-if="row.updateTime != '0001-01-01T00:00:00'">{{ row.updateTime.replace('T', ' ').substr(0, 19)
                }}</span>
        </template>
        <template #statusName="{ row }">
            <t-tag v-if="row.status == 0">未处理</t-tag>
            <t-tag v-else-if="row.status == 1" theme="danger">已违规</t-tag>
            <t-tag v-else theme="success">未违规</t-tag>
        </template>
        <template #operation="{ row }">
            <t-link theme='primary' v-if="row.status == 0" @click="editShow(row)">
                {{ $t('report.edit') }}
            </t-link>
            <t-link theme='primary' v-else disabled @click="editShow(row)">
                {{ $t('report.edit') }}
            </t-link>
        </template>
    </t-table>

    <t-dialog class="re-dia" v-model:visible="visible" width="30%" :cancelBtn="$t('common.button.cancel')"
        :confirmBtn="$t('common.button.confirm')" @confirm="confirm">
        <p>{{ $t('report.reporter') }}： {{ data.reporterName }}</p>
        <p>{{ $t('report.connent') }}：<t-textarea readonly :autosize='{ minRows: 3 }' :value="data.commentContent" />
        </p>
        <p>{{ $t('common.description') }}： <t-textarea readonly :autosize='{ minRows: 3 }' :value="data.description" />
        </p>
        <p>{{ $t('report.status') }}： <t-radio-group :value="data.status" @change="onStatusChange">
                <t-radio :value="item.id" v-for="item in statusOptions">{{ item.name }}</t-radio>
            </t-radio-group></p>
    </t-dialog>

    <t-dialog v-model:visible="detailVisible">
        <p>作者：{{ photograph.appUserNickName }}</p>
        <p>标题：{{ photograph.name }}</p>
        <p>描述：{{ photograph.description }}</p>
        <p>类型：{{ photograph.photographTypeName }}</p>
        <p>发布时间：{{ data.creationTime?data.creationTime.replace('T', ' ').substr(0, 19):'' }}</p>
        <p>浏览次数：{{ photograph.watchCount }}</p>
        <p>点赞次数：{{ photograph.likeCount }}</p>
        <p>收藏次数：{{ photograph.starCount }}</p>
        <div class="tdesign-demo-image-viewer__base">

            <t-image-viewer v-for="(img, index) in imgs" :closeOnOverlay="true" :showOverlay="true" :key="index"
                v-model:visible="visibles[index]" :default-index="index" :images="imgs">
                <template #trigger>
                    <div class="tdesign-demo-image-viewer__ui-image tdesign-demo-image-viewer__base">
                        <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
                        <div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen(index)">
                            <span>
                                <BrowseIcon size="1.4em" /> 预览
                            </span>
                        </div>
                    </div>
                </template>
            </t-image-viewer>
        </div>
    </t-dialog>

</template>

<script setup>
import api from '../api'
import { ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next';

const searchValue = ref({
    pageIndex: 1,
    pageSize: 10,
    searchValue: '全部',
    searchName: '',
    extendedValue1: '',
    extendedValue2: '',
    extendedValue3: '全部',
    total: 0
})
const status = [{ id: '全部', name: '全部' }, { id: 0, name: '未处理' }, { id: 1, name: '已违规' }, { id: 2, name: '未违规' }]
const pagination = ref({
    defaultPageSize: 20,
    total: 0,
    defaultCurrent: 1,
    size: 'small'
})
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const columns = [
    { colKey: 'photographName', title: t('photograph.name'), align: 'center', ellipsis: true },
    { colKey: 'reportTypeName', title: t('report.type.type'), align: 'center' },
    { colKey: 'appUserName', title: t('report.userName'), align: 'center' },
    { colKey: 'description', title: t('common.description'), align: 'center', ellipsis: true },
    { colKey: 'reporterName', title: t('report.reporter'), align: 'center' },
    { colKey: 'statusName', title: t('report.status'), align: 'center' },
    { colKey: 'creationTime', title: t('report.creationTime'), width: '160', align: 'center' },
    { colKey: 'updateTime', title: t('report.updateTime'), width: '160', align: 'center' },
    { colKey: 'operation', title: t('common.operation'), width: '160', align: 'center' }]
const datas = ref([])
const types = ref([])
const statusOptions = [{ id: 1, name: '已违规' }, { id: 2, name: '未违规' }]

const photograph = ref({ filesIds: "" })

const getPhotograph = (id) => {
    api.getPhotographById(id).then(res => {
        if (res.successed) {
            photograph.value = res.data
            console.log(photograph.value)
        }
    })
}

const confirm = () => {
    api.updatePhotographReport(data.value).then(res => {
        if (res.successed) {
            visible.value = false
            getPhotographReports()
            MessagePlugin.success({ content: "处理成功!", duration: 800 })
        }
    })

}

const onStatusChange = (newValue) => {
    data.value.status = newValue;
}

const data = ref({})
const visible = ref(false)
const detailVisible = ref(false)
const imgs = ref([])
const editShow = (row) => {
    visible.value = true
    data.value = JSON.parse(JSON.stringify(row))
}
import { BrowseIcon } from 'tdesign-icons-vue-next';
const visibles = ref([])
const onOpen = (index) => (visibles.value[index] = true);

const details = (id) => {
    api.getPhotographById(id).then(res => {
        if (res.successed) {
            photograph.value = res.data
            let files = photograph.value.filesIds.split(',')
            imgs.value = []
            visibles.value = []
            files.forEach(item => {
                imgs.value.push(api.show + item)
                visibles.value.push(false)
            })
            detailVisible.value = true
            console.log(photograph.value)
        }
    })

}

const getReportTypes = () => {
    api.getReportTypes().then(res => {
        if (res.successed) {
            types.value = res.datas
            types.value.unshift({ id: '全部', name: '全部' })
            statusOptions.value = res.datas
            console.log(types.value)
        }
    })
}
getReportTypes()

const searchChange = () => {
    searchValue.value.pageIndex = 1
    getPhotographReports()
}

const getPhotographReports = () => {
    // searchValue.value.pageIndex = pagination.value.defaultCurrent
    // searchValue.value.pageSize = pagination.value.defaultPageSize
    console.log(searchValue.value)

    api.getPhotographReports(searchValue.value).then(res => {
        if (res.successed) {
            datas.value = res.datas
            pagination.value.total = res.total
            console.log(datas.value)

        }
    })

}
getPhotographReports()



</script>

<style lang="scss">
.re-dia {
    p {
        line-height: 40px;
    }
}
</style>
<style scoped>
.tdesign-demo-image-viewer__ui-image {
    width: 100%;
    height: 100%;
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--td-radius-small);
    overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--td-text-color-anti);
    line-height: 22px;
    transition: 0.2s;
}

.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
    opacity: 1;
    cursor: pointer;
}

.tdesign-demo-image-viewer__ui-image--img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    position: absolute;
}

.tdesign-demo-image-viewer__ui-image--footer {
    padding: 0 16px;
    height: 56px;
    width: 100%;
    line-height: 56px;
    font-size: 16px;
    position: absolute;
    bottom: 0;
    color: var(--td-text-color-anti);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    box-sizing: border-box;
}

.tdesign-demo-image-viewer__ui-image--title {
    flex: 1;
}

.tdesign-demo-popup__reference {
    margin-left: 16px;
}

.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
    cursor: pointer;
}

.tdesign-demo-image-viewer__base {
    width: 160px;
    height: 160px;
    margin: 10px;
    border: 4px solid var(--td-bg-color-secondarycontainer);
    border-radius: var(--td-radius-medium);
}
</style>